<template>
    <div class="user-menu">
        <div class="user-menu-level-one-item">
            <div class="user-menu-level-one-item-icon">
                <i class="fas fa-home"></i>
            </div>
            <span>个人中心</span>
        </div>
        <div class="user-menu-level-one-item">
            <div class="user-menu-level-one-item-icon">
                <i class="fas fa-yen-sign"></i>
            </div>
            <span>我的钱包</span>
        </div>
        <div class="user-menu-level-two-item" @click="gotoUserWallet">账户余额</div>
        <div class="user-menu-level-one-item">
            <div class="user-menu-level-one-item-icon">
                <i class="fas fa-file-alt"></i>
            </div>
            <span>我的订单</span>
        </div>
        <div class="user-menu-level-two-item" @click="gotoPurchaseOrder">购物订单</div>
        <!-- <div class="user-menu-level-two-item" @click="gotoExpressOrder">代购订单</div> -->
        <div class="user-menu-level-one-item">
            <div class="user-menu-level-one-item-icon">
                <i class="fas fa-user"></i>
            </div>
            <span>我的资料</span>
        </div>
        <div class="user-menu-level-two-item" @click="gotoUserInformation">个人资料</div>
        <div class="user-menu-level-two-item" @click="gotoUserAddress">地址管理</div>
        <div class="user-menu-level-two-item" @click="gotoUserEditPassword">修改密码</div>
    </div>
</template>

<script>
import { ROUTENAME } from 'services/constConfig.js'

export default {
  data() {
    return {
    }
  },
  methods: {
    gotoUserWallet() {
      this.$router.push({ path: ROUTENAME.USER_WALLET })
    },
    gotoPurchaseOrder() {
      this.$router.push({ path: ROUTENAME.USER_ORDER })
    },
    gotoExpressOrder() {
      this.$router.push({ path: ROUTENAME.EXPRESS_ORDER })
    },
    gotoUserInformation() {
      this.$router.push({ path: ROUTENAME.USER_INFORMATION })
    },
    gotoUserAddress() {
      this.$router.push({ path: ROUTENAME.USER_ADDRESS })
    },
    gotoUserEditPassword() {
      this.$router.push({ path: ROUTENAME.EDIT_PASSWORD })
    }
  }
}
</script>

<style scoped>
.user-menu {
  margin-top: 20px;
  width: 130px;
  height: 100%;
  float: left;
  text-align: left;
  /* border: 1px solid #DCDFE6; */
  /* background-color: red; */
}
.user-menu-level-one-item {
  font-size: 18px;
  font-weight: 700;
  height: 30px;
  line-height: 30px;
  /* background-color: red; */
  /* margin-bottom: 10px; */
  margin-top: 30px;
}
.user-menu-level-one-item-icon {
  float: left;
  font-size: 18px;
  width: 30px;
  text-align: left;
}
.user-menu-level-two-item {
  margin-left: 30px;
  font-size: 14px;
  font-weight: normal;
  color: #909399;
  height: 30px;
  line-height: 30px;
  /* background-color: red; */
  margin-top: 10px;
}
.user-menu-level-two-item:hover {
  cursor: pointer;
}
</style>
